实现一个三列布局，其中左右两列固定宽度，中间一列自适应宽度，可以通过多种CSS技术来完成。以下是几种常见的方法：
方法一：使用浮动（Float）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三列布局</title>
<style>
.container {
width: 100%;
overflow: hidden;
}
.left {
float: left;
width: 200px; /* 固定宽度 */
background-color: lightcoral;
}
.middle {
margin: 0 200px; /* 左右留出固定宽度的空间 */
background-color: lightblue;
overflow: hidden; /* 清除浮动影响 */
}
.right {
float: right;
width: 200px; /* 固定宽度 */
background-color: lightgreen;
}
/* 清除浮动 */
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="left">左列</div>
<div class="middle">中间列（自适应）</div>
<div class="right">右列</div>
</div>
</body>
</html>
方法二：使用Flexbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三列布局</title>
<style>
.container {
display: flex;
width: 100%;
}
.left {
width: 200px; /* 固定宽度 */
background-color: lightcoral;
}
.middle {
flex: 1; /* 自适应宽度 */
background-color: lightblue;
}
.right {
width: 200px; /* 固定宽度 */
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="container">
<div class="left">左列</div>
<div class="middle">中间列（自适应）</div>
<div class="right">右列</div>
</div>
</body>
</html>
方法三：使用Grid布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三列布局</title>
<style>
.container {
display: grid;
grid-template-columns: 200px 1fr 200px; /* 左右固定宽度，中间自适应 */
width: 100%;
}
.left {
background-color: lightcoral;
}
.middle {
background-color: lightblue;
}
.right {
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="container">
<div class="left">左列</div>
<div class="middle">中间列（自适应）</div>
<div class="right">右列</div>
</div>
</body>
</html>
方法四：使用绝对定位（Absolute Positioning）
这种方法不太推荐，因为它在某些情况下可能不够灵活，但在特定场景下也可以使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三列布局</title>
<style>
.container {
position: relative;
width: 100%;
height: 100vh; /* 示例高度，可以根据需要调整 */
}
.left {
position: absolute;
left: 0;
width: 200px; /* 固定宽度 */
background-color: lightcoral;
height: 100%;
}
.middle {
margin: 0 200px; /* 左右留出固定宽度的空间 */
background-color: lightblue;
height: 100%;
overflow: hidden; /* 防止内容溢出 */
}
.right {
position: absolute;
right: 0;
width: 200px; /* 固定宽度 */
background-color: lightgreen;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="left">左列</div>
<div class="middle">中间列（自适应）</div>
<div class="right">右列</div>
</div>
</body>
</html>
选择哪种方法取决于你的具体需求和项目环境。Flexbox和Grid是现代CSS布局中非常强大和灵活的工具，推荐使用。
原文出处：
内容源于AI仅供参考，请勿使用于商业用途。如若转载请注明原文及出处。
出处地址：http://www.07sucai.com/tech/290.html
版权声明：本文来源地址若非本站均为转载，若侵害到您的权利，请及时联系我们，我们会在第一时间进行处理。
